import React, { PureComponent } from 'react'

import CSSTransition from './Transition/CSSTransition'
import SwitchTransition from './Transition/SwitchTransition'
import TransitionGroup from './Transition/TransitionGroup'

import './App.css'

import axios from 'axios'
export default class App extends PureComponent {
  constructor(props){
    super(props)
    this.state = {
      productList: [],
      tab: ['CSSTransition', 'SwitchTransition', 'TransitionGroup'],
      currentIndex: 0
    }
  }

  async componentDidMount() {
    // 发送网络请求获取数据
    // 1、axios 发送基本的网络请求
    // axios({
    //   url: 'https://httpbin.org/get',
    //   method: 'get', //默认时get
    //   params: {
    //     name: 'John',
    //     age: 30,
    //   }
    // }).then(res => {
    //   console.log(res);
      
    // }).catch(err => {
    //   console.log(err);
      
    // })

    // axios({
    //   url: 'https://httpbin.org/post',
    //   method: 'post', //默认时get
    //   data: {
    //     name: 'John',
    //     age: 30,
    //   }
    // }).then(res => {
    //   console.log(res);
      
    // }).catch(err => {
    //   console.log(err);
      
    // })

    // axios.get("https://httpbin.org/get", {
    //   params: {
    //     name: 'John1',
    //     age: 30,
    //   }
    // }).then(console.log)

    // axios.post("https://httpbin.org/post", {
    //   name: 'John3',
    //   age: 30,
    // }).then(console.log)

    // // 2、本质上  其他axios的请求都是axios.request
    // axios.request({
    //   url: 'https://httpbin.org/get',
    //   method: 'get',
    //   params: {
    //     name: 'John2',
    //     age: 30,
    //   },
    //   headers: {
    //     'X-Custom-Header': 'Custom Value'
    //   }
    // }).then(res => {
    //   console.log(res);
    // })

    // axios.request({
    //   method: 'post',
    //   url: 'https://httpbin.org/post',
    //   data: {
    //     name: 'John3',
    //     age: 30,
    //   },
    //   headers: {
    //     'X-Custom-Header': 'Custom Value'
    //   }
    // }).then(res => {
    //   console.log(res);
    // })

    // 3、并发请求
    // const request1 =  axios({
    //   url: 'https://httpbin.org/get',
    //   method: 'get', //默认时get
    //   params: {name: 'John',age: 30,}
    // })
    // const request2 =  axios({
    //   url: 'https://httpbin.org/post',
    //   method: 'post', //默认时get
    //   params: {name: 'Jerry',age: 30,}
    // })
    // axios.all([request1,request2]).then((res) => {
    //   console.log(res);
    // })
    // // 解构结果
    // axios.all([request1,request2]).then(([res1,res2]) => {
    //   console.log(res1, res2);
    // })

    // // 4、并发请求的本质使用promise.all    两个请求都回调了resolve才会执行

    // const promise1 = new Promise(resolve => {
    //   setTimeout(() => {
    //     resolve('Hello, Axios!')
    //   }, 2000)
    // })
    // const promise2 = new Promise(resolve => {
    //   setTimeout(() => {
    //     resolve('Hello, Axios!')
    //   }, 4000)
    // })
    // Promise.all([promise1, promise2]).then(([res1, res2]) => {
    //   console.log(res1, res2);
    // })


    // 5、全局配置
    axios.defaults.baseURL = 'https://httpbin.org'
    // axios.defaults.headers.common['X-Custom-Header'] = 'Custom Value'
    // // axios.defaults.headers.post['Content-Type'] = 'application/json'
    // axios.defaults.timeout = 5000
    // const request1 =  axios({
    //   url: '/get',
    //   method: 'get', //默认时get
    //   params: {name: 'John',age: 30,}
    // })
    // const request2 =  axios({
    //   url: '/post',
    //   method: 'post', //默认时get
    //   params: {name: 'Jerry',age: 30,}
    // })
    // axios.all([request1,request2]).then((res) => {
    //   console.log(res);
    // })

    // 6、async...awaith使用
    const response1 = await axios.get('/get', {
      params: {name: 'John',age: 30,}
    })
    const response2 = await axios.post('/post', {
      name: 'Jerry',
      age: 30,
    })
    console.log(response1, response2);
    // 异常处理
    try {
      const response1 = await axios.get('/get', {
        params: {name: 'John',age: 30,}
      })
      console.log(response1);
    } catch (error) {
      console.log(error);
      
    }
  }
  render() {
    let tabContent = null
    if (this.state.currentIndex === 0) {
      tabContent = <CSSTransition></CSSTransition>
    }else if(this.state.currentIndex === 1) {
      tabContent = <SwitchTransition></SwitchTransition>
    }else if(this.state.currentIndex === 2) {
      tabContent = <TransitionGroup></TransitionGroup>
    }
    console.log(tabContent);
    
    return (
      <div className="container">
        {this.state.productList.map(product => (
          <div key={product.id}>{product.name}</div>
        ))}
        <h2>动画</h2>
        {/* 安装动画库  yarn add react-transition-group */}
        <div className="tab_wrap">
          {
            this.state.tab.map((tab,index) => (
              <div className={'tab_item ' + (this.state.currentIndex === index ? 'active' : '')} key={tab} onClick={() => this.setState({currentIndex: index})}>
                {tab}
              </div>
            ))
          }
        </div>
        {tabContent}
      </div>
    )
  }
}
